<template>
    <div class="m-table">
      <div style="width: 900px;">
        <ag-grid-vue
          style="width: 100%; height: 350px;"
          class="ag-theme-balham"
          :gridOptions="gridOptions"
          :columnDefs="columnDefs"
          :rowData="rowData"
          :getSelectedRows="getSelectedRows"
        >
        </ag-grid-vue>
      </div>
      <input type="email" />
      <div class="tableBox">
        <div class="tableLBox">
          <div class="tableL" ref="tableL" @scroll="scrollL" @mouseenter="mouseEnter('a')">
            <table>
              <thead>
                <tr>
                  <th>ID</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(list, index) of tableL" :key="index">
                  <td>{{list}}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="tableZBox">
          <div class="tableZ" ref="tableZ" @scroll="scrollZ" @mouseenter="mouseEnter('b')">
            <table>
              <thead>
              <tr>
                <th>ID</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="(list, index) of tableZ" :key="index">
                <td>{{list}}</td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="tableRBox">
          <div class="tableR" ref="tableR" @scroll="scrollR" @mouseenter="mouseEnter('c')">
            <table>
              <thead>
              <tr>
                <th>ID</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="(list, index) of tableR" :key="index">
                <td>{{list}}</td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
</template>
<style lang="less" type="text/less">
.m-table {
  padding-top: 60px;
  .my-class-1 {
    color: red;
  }
  .tt-table-loading {
    height: 100%;
  }
}
</style>
<style lang="less" type="text/less">
  .tableBox {
    width: 200px;
    height: 400px;
    border: 1px solid #ccc;
    margin: 0 auto;
    display: flex;
    overflow: hidden;
    tr {
      height: 40px;
      td, th {
        width: 60px;
        text-align: center;
      }
    }
    .tableLBox, .tableZBox, .tableRBox {
      width: 60px;
      height: 100%;
      overflow: hidden;
      box-sizing: border-box;
      .tableL,.tableZ,.tableR {
        width: 70px;
        height: 100%;
        overflow: auto;
      }
    }
  }
</style>
<script>
  import Vue from 'vue'
  import {AgGridVue} from "ag-grid-vue";
  import FHeader from '@/components/select/header'
  let SquareComponent = Vue.extend({
    template: '<span>{{ valueSquared() }}</span>',
    methods: {
      valueSquared() {
        console.log(this.params)
        return this.params.value;
      }
    }
  });
  let SquareComponent1 = Vue.extend({
    template: '<div class="tt-table-loading" v-loading="loading"></div>',
    data () {
      return {
        loading: true
      }
    }
  });
export default {
  data () {
    return {
      gridOptions: null,
      columnDefs: null,
      rowData: null,
      tableL: [1,2,3,4,5,6,7,8,9,10,11,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
      tableR: [1,2,3,4,5,6,7,8,9,10,11,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
      tableZ: [1,2,3,4,5,6,7,8,9,10,11,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
      scrollName: '',
    }
  },
  methods: {
    createRowData () {
      this.rowData = [
        {make: {val: "Toyota"}, model: "Celica", price: 35000},
        {make: "Ford", model: "Mondeo", price: 32000},
        {make: "Porsche", model: "Boxter", price: 72000}
      ]
    },
    createColumnDefs ()  {
      this.$emit('kash')
      this.columnDefs = [
        {
          headerName: "Make",//表头名
          field: "make",//label
          cellRendererFramework: SquareComponent,//列表内容组件替换
          headerCheckboxSelection: true,//头部选择框
          checkboxSelection: true,
          sortingOrder: ['asc','desc'],
          headerComponentFramework: FHeader,
          isorder: false
        },
        {headerName: "Model", field: "model"},
        {headerName: "Price", field: "price"}
      ]
    },
    getSelectedRows (row) {
      //console.log(row)
    },
    action () {
      return new Promise((resolve, reject) =>{
        setTimeout(() => {
          resolve(2)
        }, 1000)
      }).then((res) => {
        return res
      })
    },
    scrollL () {
      if(this.scrollName != 'a') return;
      this.$refs['tableZ'].scrollTop = this.$refs['tableR'].scrollTop = this.$refs['tableL'].scrollTop;
    },
    scrollZ () {
      if(this.scrollName != 'b') return;
      this.$refs['tableL'].scrollTop = this.$refs['tableR'].scrollTop = this.$refs['tableZ'].scrollTop
    },
    scrollR () {
      if(this.scrollName != 'c') return;
      this.$refs['tableZ'].scrollTop = this.$refs['tableL'].scrollTop = this.$refs['tableR'].scrollTop
    },
    mouseEnter (val) {
      this.scrollName = val;
    }
  },
  components: {
    AgGridVue
  },
  beforeMount() {
    this.gridOptions = {
      context: {
        componentParent: this
      },
      /*suppressRowClickSelection: true,*/
      postSort (rowNodes) {
        //console.log(55555)
      },
      onRowSelected (row) {
        //console.log(row)
      },//单行选中或不选中时触发的事件
      getRowClass (params) {
        //console.log(params)
        return params.data.make === 'Toyota'?'my-class-1':'my-class-2';
      },
      rowDragManaged: true,//表示可以拖动
      animateRows: true,//动画
      unSortIcon: true,//排序图标的显示
      rowSelection: 'multiple',//可以选择多行
      enableSorting:true,//
      headerHeight: 27,
      groupHeaderHeight: 27,
      onRowDoubleClicked: function(event) { console.log('a row was clicked'); },//双击行列表
      defaultColDef: {
        editable: false,
        rowDrag:true,
      },//默认设置编辑和拖动
    };
    this.createRowData();
    this.createColumnDefs();
  },
  mounted() {
    this.$once('kash',() => {
      console.log(333)
    })
    this.$emit('kash')
    let _this = this;
    this.gridOptions.api.sizeColumnsToFit();
    /*let arr  = [
      {make: 'Toyota', model: "Celica", price: 35000},
      {make: "Ford", model: "Mondeo", price: 32000},
      {make: "Porsche", model: "Boxter", price: 72000}
    ]*/
    this.gridOptions.api.showLoadingOverlay();
    setTimeout(() => {
      _this.rowData = [
        {make: 'Toyota', model: "Celica", price: 35000},
        {make: "Ford", model: "Mondeo", price: 32000},
        {make: "Porsche", model: "Boxter", price: 72000}
      ]
    },1000)
    /*new Promise((resolve, reject) =>{
      setTimeout(() => {
        resolve(2)
      }, 1000)
    }).then(async (res) => {
      let mm = 0;
      await this.action().then((data) => {
        mm = data;
      });
      console.log('mm : ' + mm)
      console.log(222)
    })*/
    /*this.gridOptions.api.setRowData(arr)*/
  }
}
</script>
